<template>
  <div class="dashboard-container edit-order">
    <div class="app-container">
      <el-form
        label-width="110px"
        :inline="true"
        class="order-list"
      >
        <!-- 订单 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号:" label-width="110px" class="order-form">
              <el-input
                v-model="orderForm.id"
                placeholder="请输入订单编号"
                style="width: 280px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- 订单状态 -->
            <el-form-item

              label="订单转态:"
              label-width="110px"
              class="order-form"
            >
              <el-select v-model="orderForm.status" placeholder="请选择" style="width: 280px">
                <el-option v-for="(item) in statusList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- 付费状态 -->
            <el-form-item
              label="付费状态:"
              label-width="110px"
              class="order-form"
            >
              <el-select v-model="orderForm.paymentStatus" placeholder="请选择" style="width: 280px">
                <el-option
                  v-for="(item) in payMoneyStatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id
                  "
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <!-- 发件人 -->
            <el-form-item
              label="发件人姓名:"
              label-width="110px"
              class="order-form"
            >
              <el-input
                v-model="orderForm.senderName"
                placeholder="请输入发件人姓名"
                style="width: 280px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- 发件人电话 -->
            <el-form-item label="发件人电话:" label-width="110px">
              <el-input
                v-model="orderForm.senderPhone"
                placeholder="请输入发件人电话"
                style="width: 280px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item

              label="发件人地址:"
              label-width="110px"
              class="order-form"
            >
              <el-select v-model="orderForm.senderProvinceId" placeholder="请选择" style="width: 90px" class="a" @change="sq">
                <el-option v-for="(item) in provinceList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <!-- 做到这里数据绑定 -->
              <el-select
                v-model="orderForm.senderCityId"
                placeholder="请选择"
                style="width: 90px"
                class="b"
                @change=" qx"
              >
                <el-option v-for="(item) in senderCityList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select
                v-model="orderForm.senderCountyId"
                placeholder="请选择"
                style="width: 90px"
                class="c"
              >
                <el-option v-for="(item) in senderCountyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="收件人姓名:" label-width="110px" class="oder-form">
              <el-input
                v-model="orderForm.receiverName"
                placeholder="请输入收件人姓名"
                style="width: 280px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件人电话:" label-width="110px" class="oder-form">
              <el-input
                v-model="orderForm.receiverPhone"
                placeholder="请输入收件人电话"
                style="width: 280px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item

              label="发件人地址:"
              label-width="110px"
              class="order-form"
            >
              <el-select v-model="orderForm.receiverProvinceId" placeholder="请选择" style="width: 90px" class="a" @change="sjr">
                <el-option v-for="item in provinceList" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
              <el-select v-model="orderForm.receiverCityId" placeholder="请选择" style="width: 90px" class="b" @change="sjrq">
                <el-option v-for="(item) in receiverCityList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="orderForm.receiverCountyId" placeholder="请选择" style="width: 90px" class="c">
                <el-option v-for="(item) in receiverCountyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 按钮 -->
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item class="order-btn">
              <el-button
                style="
              background-color: #e15536;
              color: #fff;
              width: 90px;
              height: 40px;
            "
                @click="getlist"
              >确定</el-button>
              <el-button
                style="width: 90px; height: 40px"
                class="quxiao"
                @click="clearList"
              >取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="table-list">
        <!-- 数据暂时没有使用先不绑定 -->
        <el-table
          :data="tableData"
          highlight-current-row
          stripe
          style="width: 100%"
        >
          <el-table-column label="序号" width="60" prop="number">
            <template slot-scope="scope">
              <span>{{ (orderForm.page-1) * orderForm.pageSize + scope.$index }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" width="165" prop="id" />
          <el-table-column label="运单编号" width="165" prop="transportOrder.id" />
          <el-table-column label="下单时间" width="160" prop="createTime" />
          <el-table-column label="订单状态" width="160" prop="status">
            <template slot-scope="scope">
              <span v-if="scope.row.status === 23000">
                待取件
              </span>
              <span v-else-if="scope.row.status === 23001">
                已取件
              </span>
              <span v-else-if="scope.row.status === 23005">
                运输中
              </span>
              <span v-else-if="scope.row.status === 23008">
                派送中
              </span>
              <span v-else-if="scope.row.status === 23009">
                已签收
              </span>
              <span v-else-if="scope.row.status === 23010">
                拒收
              </span>
              <span v-else-if="scope.row.status === 23011">
                已取消
              </span>

            </template>
          </el-table-column>
          <el-table-column label="发件人姓名" width="160" prop="senderName" />
          <el-table-column label="发件人电话" width="160" prop="senderPhone" />
          <el-table-column label="收件人地址" width="160">
            <template slot-scope="scope">
              <span>
                {{ scope.row.receiverProvince.name }}
                {{ scope.row.receiverCity.name }}
                {{ scope.row.receiverCounty.name }}
                {{ scope.row.receiverAddress }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="收件人姓名" width="160" prop="receiverName" />
          <el-table-column label="收件人姓名" width="160" prop="receiverPhone" />
          <el-table-column label="发件人地址" width="160">
            <template slot-scope="scope">
              <span>
                {{ scope.row.senderProvince.name }}
                {{ scope.row.senderCity.name }}
                {{ scope.row.senderCounty.name }}
                {{ scope.row.senderAddress }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="取件类型" width="160" prop="pickupType">
            <template slot-scope="scope">
              <span v-if="scope.row.pickupType === 2">
                上门取件
              </span>
              <span v-else>送货上门</span>

            </template>
          </el-table-column>
          <el-table-column label="付费类型" width="160" prop="paymentMethod">
            <template slot-scope="scope">
              <span v-if="scope.row.paymentMethod === 1">预结</span>
              <span v-else>已结 </span>
            </template>
          </el-table-column>
          <el-table-column label="付费状态" width="160" prop="paymentStatus">
            <template slot-scope="scope">
              <span v-if="scope.row.paymentStatus === 1">未付</span>
              <span v-else>已付</span>

            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="85">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="$router.push(`/business/order-s/${scope.row.id}`)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination

          :page-sizes="[10, 20, 30, 50]"
          :page-size="orderForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100"

          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderPageData, getAreaList } from '@/api/business'

export default {
  name: 'OrderPage',
  data() {
    return {
      orderForm: {
        page: 1,
        pageSize: 10,
        // 订单编号(不确定)
        id: '',
        // 订单状态
        status: '',
        // 付费状态
        paymentStatus: '',
        // 发件人名字
        senderName: '',
        // 发件人电话
        senderPhone: '',
        // 发件人省
        senderProvinceId: '',
        // 发件人市
        senderCityId: '',
        // 发件人区
        senderCountyId: '',
        // 收件人名字
        receiverName: '',
        // 收件人电话
        receiverPhone: '',
        // 收件人省
        receiverProvinceId: '',
        // 收件人市
        receiverCityId: '',
        // 收件人区
        receiverCountyId: ''
      },
      tableData: [],
      total: 0,
      // 订单状态列表
      statusList: [
        {
          id: 23000,
          name: '待取件'
        },
        {
          id: 23001,
          name: '已取件'
        },
        {
          id: 23005,
          name: '运输中'
        },
        {
          id: 23008,
          name: '派送中'
        },
        {
          id: 23009,
          name: '已签收'
        },
        {
          id: 23010,
          name: '拒收'
        },
        {
          id: 230011,
          name: '已取消'
        },
        {
          id: 0,
          name: '全部'
        }
      ],
      // 获取省份列表(公用在收件地址和发件地址)
      provinceList: [],
      // 发件人市列表
      senderCityList: [],
      // 发件人区
      senderCountyList: [],
      // 收件人市
      receiverCityList: [],
      // 收件人区列表
      receiverCountyList: [],
      // 付费状态
      payMoneyStatus: [
        {
          id: 1,
          name: '未付'
        },
        {
          id: 2,
          name: '已付'
        }
      ]
    }
  },
  created() {
    // 初始化数据
    this.getOrderPageData()
    this.getAreaList()
  },
  methods: {
    // 获取分析详情
    async getOrderPageData() {
      const res = await getOrderPageData(this.orderForm)
      this.tableData = res.items
      this.total = res.counts
      console.log(res)
      console.log(this.total)
    },
    // 每页有多少条数据
    // pageSize 改变时会触发 => 传递第一次列表获取是的初始化数据，当 PagSize的数据改变时就重新获取数据，渲染
    async handleSizeChange(val) {
      this.orderForm.pageSize = val
      await this.getOrderPageData()
    },
    // 当前页数
    async handleCurrentChange(val) {
      this.orderForm.page = val
      await this.getOrderPageData()
    },
    // (收件，发货) 获取省份
    async  getAreaList() {
      const res = await getAreaList()
      this.provinceList = res
    },
    // 获取市区（发件人）
    async sq() {
      console.log(this.orderForm.senderProvinceId)
      const res = await getAreaList(this.orderForm.senderProvinceId)
      this.senderCityList = res
    },
    // 获取区县（发件人）
    async qx() {
      const res = await getAreaList(this.orderForm.senderCityId)
      console.log(res)
      this.senderCountyList = res
    },
    // 获取市区（收）
    async sjr() {
      const res = await getAreaList(this.orderForm.receiverProvinceId)
      this.receiverCityList = res
    },
    async sjrq() {
      const res = await getAreaList(this.orderForm.receiverCityId)
      this.receiverCountyList = res
    },
    // 点击取消 ==》 清空表单
    async clearList() {
      this.orderForm.id = ''
      this.orderForm.status = ''
      this.orderForm.paymentStatus = ''
      this.orderForm.senderName = ''
      this.orderForm.senderPhone = ''
      this.orderForm.senderProvinceId = ''
      this.orderForm.senderCityId = ''
      this.orderForm.senderCountyId = ''
      this.orderForm.receiverName = ''
      this.orderForm.receiverPhone = ''
      this.orderForm.receiverProvinceId = ''
      this.orderForm.receiverCityId = ''
      this.orderForm.receiverCountyId = ''
      this.getOrderPageData()
    },
    // 点击搜索完成 ==》 清空标点
    async getlist() {
      await this.getOrderPageData()
      this.orderForm.id = ''
      this.orderForm.status = ''
      this.orderForm.paymentStatus = ''
      this.orderForm.senderName = ''
      this.orderForm.senderPhone = ''
      this.orderForm.senderProvinceId = ''
      this.orderForm.senderCityId = ''
      this.orderForm.senderCountyId = ''
      this.orderForm.receiverName = ''
      this.orderForm.receiverPhone = ''
      this.orderForm.receiverProvinceId = ''
      this.orderForm.receiverCityId = ''
      this.orderForm.receiverCountyId = ''
    }
    // 点击跳转页面（使用路由传参）

  }

}

</script>

<style lang="scss" scoped>
.app-container {
  .order-list {
    width: 100%;
    height: 260px;
    border-radius: 10px;
    padding: 20px 20px 58px 0px;
    background-color: #fff;
    margin-bottom: 20px;
    .a {
      margin-right: 5px;
    }
    .b {
      margin-right: 5px;
    }
    .order-btn {
      margin-left: 20px;
    }
    .quxiao {
      margin-left: 10px;
    }
  }
  .table-list {
    width: 100%;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 28px 28px 58px;
    .list {
      width: 100%;
      margin-top: 20px;
      border: 1px solid #ebeef5;
    }
    .el-pagination {
      margin-top: 20px;
      height: 32px;
      display: flex;
      padding: 0;
      line-height: 32px;
      justify-content: center;
    }
  }
}
</style>

